<template>
  <div class="calendar-container">
    <!-- 头部区域 -->
    <div class="calendar-header">
      <h3>教学日历</h3>
    </div>
    <div class="card-tools">
      <el-button 
        icon="el-icon-arrow-left" 
        size="mini" 
        class="tool-btn"
        @click="changeWeek(-1)"
      ></el-button>
      <el-button 
        icon="el-icon-arrow-right" 
        size="mini" 
        class="tool-btn"
        @click="changeWeek(1)"
      ></el-button>
    </div>
    <!-- 日历内容区域 -->
    <div class="calendar-content">
      <!-- 时间列 -->
      <el-col :span="3" class="time-column">
        <el-row 
          class="time-slot" 
          v-for="slot in timeSlots" 
          :key="slot.id"
        >
          <span>{{ slot.time }}</span>
        </el-row>
      </el-col>
      
      <!-- 星期列 -->
      <el-col :span="24" class="week-days">
        <el-row :gutter="1">
          <el-col 
            class="day-column" 
            v-for="day in weekDays" 
            :key="day.date"
          >
            <el-row class="day-header">
              <el-col :span="24" class="weekday">{{ day.weekday }}</el-col>
              <el-col :span="24" class="date">{{ day.date }}</el-col>
            </el-row>
            
            <el-row 
              class="course-slot" 
              v-for="(course, index) in day.courses" 
              :key="index"
            >
              <el-tooltip 
                :content="course || '无课程安排'" 
                placement="top"
                :disabled="!course"
              >
                <div 
                  :class="course ? 'course-item' : 'empty-slot'"
                  :style="course ? getCourseStyle(index) : {}"
                >
                  {{ course ? formatCourseName(course) : '' }}
                </div>
              </el-tooltip>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TeachingCalendar',
  props: {
    // 初始周数据
    initialWeek: {
      type: Array,
      default: () => []
    },
    // 是否显示边框
    border: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      // 时间段数据
      timeSlots: [
        { id: 1, time: '8:00-8:50' },
        { id: 2, time: '8:55-9:45' },
        { id: 3, time: '10:00-10:50' },
        { id: 4, time: '10:55-11:45' }
      ],
      // 星期数据
      weekDays: [],
      // 课程颜色列表
      courseColors: [
        { bg: '#F59A23', border: '#91d5ff', text: '#FFFFFF' },
        { bg: '#008EFF', border: '#ffd666', text: '#FFFFFF' },
        { bg: '#B98CDE', border: '#b7eb8f', text: '#FFFFFF' },
        { bg: '#F47E8C', border: '#ffccc7', text: '#FFFFFF' }
      ]
    }
  },
  created() {
    this.initCalendarData()
  },
  methods: {
    // 初始化日历数据
    initCalendarData() {
      if (this.initialWeek.length > 0) {
        this.weekDays = this.initialWeek
      } else {
        // 默认周数据
        this.weekDays = [
          {
            weekday: '周一',
            date: '5/26',
            courses: [
              '幼儿园课程与教学论[逸夫楼212]',
              '',
              '',
              ''
            ]
          },
          {
            weekday: '周二',
            date: '5/27',
            courses: [
              '',
              '幼儿保育学[逸夫楼212]',
              '',
              ''
            ]
          },
          {
            weekday: '周三',
            date: '5/28',
            courses: [
              '幼儿园课程与教学论[逸夫楼212]',
              '',
              '幼儿园课程与教学论[逸夫楼212]',
              ''
            ]
          },
          {
            weekday: '周四',
            date: '5/29',
            courses: [
              '',
              '幼儿音乐教育[逸夫楼212]',
              '',
              '幼儿园课程与教学论[逸夫楼212]'
            ]
          },
          {
            weekday: '周五',
            date: '5/30',
            courses: [
              '幼儿园课程与教学论[逸夫楼212]',
              '',
              '',
              ''
            ]
          },
          {
            weekday: '周六',
            date: '5/31',
            courses: [
              '幼儿园课程与教学论[逸夫楼212]',
              '',
              '幼儿园课程与教学论[逸夫楼212]',
              ''
            ]
          },
          {
            weekday: '周日',
            date: '6/1',
            courses: [
              '',
              '幼儿园教育实践[逸夫楼212]',
              '',
              ''
            ]
          }
        ]
      }
    },
    
    // 切换周
    changeWeek(direction) {
      this.$emit('week-changed', direction)
      
      // 简单日期更新逻辑
      this.weekDays = this.weekDays.map(day => {
        const [month, dayNum] = day.date.split('/').map(Number)
        let newDayNum = dayNum + (direction * 7)
        // 实际项目中应使用日期库处理，如moment.js
        return {
          ...day,
          date: `${month}/${newDayNum}`
        }
      })
    },
    
    // 获取课程样式
    getCourseStyle(index) {
      const color = this.courseColors[index % this.courseColors.length]
      return {
        backgroundColor: color.bg,
        borderLeftColor: color.border,
        color: color.text
      }
    },
    
    // 格式化课程名称（显示简短名称）
    formatCourseName(course) {
      // 提取[]前的课程名
      // const match = course.match(/^(.*?)\[/)
      // return match ? match[1] : course
      return course;
    }
  }
}
</script>

<style scoped>
.calendar-container {}

.calendar-header {
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.calendar-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}
.card-tools{
  text-align: right;
}
.tool-btn {
  margin-left: 5px;
}

.calendar-content {
  height: calc(100% - 56px);
  overflow: hidden;
  display: flex;
}

/* 优化时间列样式 */
.time-column {
  margin-top: 16px;
}

.time-slot {
  height: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #666;
  transition: background-color 0.2s; /* 平滑过渡效果 */
  position: relative; /* 为伪元素定位 */
}

.week-days {
  height: 100%;
  overflow: hidden;
  flex: 1;
}

.day-column {
  height: 100%;
  width: 14%;
}

.day-header {
  text-align: center;
  padding: 8px 0;
  border-bottom: 1px solid #e6e6e6;
}

.weekday {
  font-size: 12px;
  font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
  margin-bottom: 2px;
}

.date {
  font-size: 12px;
  color: #888;
}

/* 优化课程时间段样式 */
.course-slot {
  height: 64px;
  border-bottom: 1px dashed #f0f0f0; /* 虚线分隔更柔和 */
  transition: background-color 0.15s; /* 悬停效果过渡 */
  display: flex;
  justify-content: center;
}

/* 鼠标悬停在时间段上时的背景变化 */
.course-slot:hover {
  background-color: rgba(0, 0, 0, 0.01);
}

.course-item {
  width: 63px;
  height: 100%;
  padding: 5px;
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 6px;
  line-height: 19px;
  text-align: center;
}

.empty-slot {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
</style>